<template>
  <div class="goodsform">
<!--    表格数据-->
    <el-table
        :data="pageData"
        stripe
        style="width: 100%">
      <el-table-column
          prop="name"
          label="物品名称"
          width="180">
      </el-table-column>
      <el-table-column
          prop="count"
          label="物品数量"
          width="180">
      </el-table-column>
      <el-table-column
          prop="weight"
          label="物品重量">
      </el-table-column>
      <el-table-column
          prop="category"
          label="物品种类">
      </el-table-column>
      <el-table-column
          prop="date"
          label="入库时间">
      </el-table-column>
      <el-table-column
          prop="note"
          label="备注">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click.native.prevent="handleEdit(scope.$index,totalData)"> <slot name="push">编辑</slot>
          </el-button>
          <el-button
              size="mini"
              type="danger"
              @click.native.prevent="deleteRow(scope.$index, totalData)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--    分页-->
    <el-pagination
        @current-change="handlePageChange"
        layout="prev, pager, next"
        :total="totalData.length"
        :page-size="pageSize"
        :current-page="curPage">
    </el-pagination>
<!--    由父元素决定弹出框的样式-->
    <slot name="dialog"></slot>
  </div>
</template>

<script>
export default {
  name: "GoodsForm",
  data() {
    return {
      pageSize: 6,
      curPage: 1,
    }
  },
  props: {
    pageData: {
      type: Array,
      default() {
        return []
      }
    },
    totalData: {
      type: Array,
      default() {
        return []
      }
    },
  },
  created() {
  },
  methods: {
    deleteRow(index, rows) {
      this.$emit('deleteRow',{index, rows})
    },
    handleEdit(index, row) {
      this.$emit('handleEdit',{
        index,
        row,
      })
    },
    handlePageChange(val) {
      console.log(this.curPage)
      this.$emit('handlePageChange',{
        pageSize: this.pageSize,
        curPage: val
      })

    }

  }
}
</script>

<style scoped>
.goodsform{
  text-align: center;
}
</style>